<template>
  <!-- 管理员列表-->
  <div>
    <ul class="flexWap padding15 borderB1">
    
      <li class="wid250px marginB10 marginR10">
        <el-input placeholder="请输入搜索的内容" @change="search" v-model="pages.keyWord" :clearable="true">
        </el-input>
      </li>
      <li class="marginB10 marginR10">
        
        <el-button type="primary" @click="search">查询</el-button>
      </li>
      <li class="marginB10 marginR10">
        
        <el-button type="primary" @click="add">新增</el-button>
      </li>
      <li class="marginB10 marginR10">
        
        <el-button type="danger">批量删除</el-button>
      </li>
    </ul>
      
    <div class="padding15">
        <p class="paddingB15">已选择 <span class="colorRed">{{multipleSelection.length}}</span> 条数据</p>
      <el-table
              :data="lists"
              height="580"
              stripe
              border
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column type="selection" width="55"/>
              <el-table-column align="center" type="index" label="序号" width="50" />
     
        <el-table-column sortable align="center" prop="organizationName" label="管理员名称" min-width="160"/>
        <el-table-column sortable align="center" prop="title" label="手机号" width="160"/>
        <el-table-column align="center" prop="levelCode" label="状态" width="120">
          <template slot-scope="scope">
            <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ccc">
          </el-switch>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="endTime" label="注册时间" width="160" />
        <el-table-column label="操作" align="center" min-width="240" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini"  type="primary"@click="edit(scope.row)">编辑</el-button>

            <el-dropdown style="margin-left: 10px;" trigger="click"  @command="handleCommand($event,scope.row)">
              <span class="el-dropdown-link">
                ...<i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item style="color: #F56C6C !important;" command="del">
                  删除
                    <!-- <el-button size="mini"  type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" command="look">
                  查看
                </el-dropdown-item>
                <el-dropdown-item class="clearfix" command="psd">
                  重置密码
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" :pages="pages" :searchQuery="searchQuery"></Pagination>
    </div>
    <el-dialog
      title="重置密码"
      :visible.sync="psdShow"
      width="500px"
      >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="新密码" prop="password">
          <el-input class="wid260" v-model="ruleForm.password" placeholder="请输入新密码"></el-input>
        </el-form-item>
      <el-form-item label="确认新密码" prop="newpassword">
        <el-input class="wid260" v-model="ruleForm.newpassword" placeholder="请输入确认新密码"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="psdShow = false">取 消</el-button>
      <el-button type="primary"  @click="submitForm('ruleForm')">确 定</el-button>
      </span>
      </el-dialog>
  </div>
</template>
<script>
  // import {questionnaireRecordReportList,questionnaireRecordDel} from '@/assets/api/api'
  import {Mixin} from '@/assets/mixins/mixin'
  import moment from 'moment'
  export default {
    name:'AccountnumberList',
    mixins: [Mixin],
    components:{
    },
    data(){
      return{
        ruleForm:{
          password:'',
          newpassword:'',
        },
        psdShow:false,
        rules: {
              password: [
                  { required: true, message: '请输入新密码', trigger: 'blur' },
                  { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
              ],
              newpassword: [
                  { required: true, message: '请输入确认新密码', trigger: 'blur' },
                  { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
              ],
          },
        addEditPath:'/accountMumber/addEditAccountMumber',//新增编辑的路径
        pageLoading:false,
        multipleSelection:[],
        title:'新增',
        pages:{ //分页搜索
          keyWord:'',
          page:1,
          keyword:'',
          size:10,userId:1
        },
        total:0,// 总条数
        loading:false,//加载中...
        lists:[{status:0,id:1}],
        detailObj:{},//点击每行的详情数据
        pageUrl:{
          // list:'/api/user/list',
          // del:'/api/user'
        }
        
      }
    },
    created() {
       
    },
    methods:{
      handleCommand(command,v){
          console.log(v,'scope.row')
          if(command==='del'){//删除
              this.handleDelete(v);
          }else if(command==='look'){//查看
              this.handleLook(v)
          }else if(command==='psd'){//重置密码
                let that = this;
                that.psdShow = true;
                that.ruleForm.id= v.id||'';
          }
      },
     
      submitForm(formName){
        let that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(that.ruleForm.password!==that.ruleForm.newpassword) return that.$message.error('两次的密码不一致');
                    that.psdShow = false
                } else {
                    return false;
                }
            });
      },
      handleSelectionChange(val) {//多选
        this.multipleSelection = val;
      },
     
  
    }
  }
</script>
<style lang="scss" scoped>
::v-deep .el-input-group__append, ::v-deep.el-input-group__prepend{
    color: #fff;
  }

</style>
